<template>
  <div class="dashboard-editor-container">
    <github-corner class="github-corner" />

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <el-col :xs="0" :sm="6" :lg="3">
        <!-- <line-chart :chart-data="lineChartData" /> -->
        <div style="margin-left: 30%; padding:10 px; border-right: 1px solid #d2d2d2">
          <div>
            <div style="color: #909399; font-size: 14px">本月订单总数</div>
            <div style="color: #606266; font-size: 24px; padding: 10px 0">
              {{ this.week_order.monthOrderDetail.allCount }}
            </div>
            <div>
              <span class="color-success" style="font-size: 14px; color: green"
                >+{{
              
                  this.week_order.monthOrderDetail.orderCountGrowthRate
                
               
                }}</span
              >
              <span style="color: #c0c4cc; font-size: 14px">同比上月</span>
            </div>
          </div>
          <div style="margin-top: 20px">
            <div style="color: #909399; font-size: 14px">本周订单总数</div>
            <div style="color: #606266; font-size: 24px; padding: 10px 0">
              {{ this.week_order.weekOrderDetail.allCount }}
            </div>
            <div>
              <span class="color-danger" style="font-size: 14px; color: red">{{
                this.week_order.weekOrderDetail.orderCountGrowthRate
              }}</span>
              <span style="color: #c0c4cc; font-size: 14px">同比上周</span>
            </div>
          </div>
          <div style="margin-top: 20px">
            <div style="color: #909399; font-size: 14px">本月销售总额</div>
            <div style="color: #606266; font-size: 24px; padding: 10px 0">
              {{ this.week_order.monthOrderDetail.allPrice }}
            </div>
            <div>
              <span class="color-success" style="font-size: 14px; color: green"
                >+{{
                  this.week_order.monthOrderDetail.orderPriceGrowthRate
                }}</span
              >
              <span style="color: #c0c4cc; font-size: 14px">同比上月</span>
            </div>
          </div>
          <div style="margin-top: 20px">
            <div style="color: #909399; font-size: 14px">本周销售总额</div>
            <div style="color: #606266; font-size: 24px; padding: 10px 0">
              {{ this.week_order.weekOrderDetail.allPrice }}
            </div>
            <div>
              <span class="color-danger" style="font-size: 14px; color: red">{{
                this.week_order.weekOrderDetail.orderPriceGrowthRate
              }}</span>
              <span style="color: #c0c4cc; font-size: 14px">同比上周</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="25" :sm="18" :lg="21" class="chart-wrapper">
        <el-row>
          <el-col :xs="25" :sm="20" :lg="7">
            <div style="padding: 10px; margin-right: 1px">
              <el-date-picker
                style="width: 100%"
                v-model="value2"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker></div
          ></el-col>
        </el-row>

        <line-chart :time-data="value2" />
      </el-col>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="8">
      <el-col
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 12 }"
        :xl="{ span: 12 }"
        style="padding-right: 8px; margin-bottom: 30px"
      >
        <transaction-table />
      </el-col>
      <el-col
        :xs="{ span: 24 }"
        :sm="{ span: 12 }"
        :md="{ span: 12 }"
        :lg="{ span: 6 }"
        :xl="{ span: 6 }"
        style="margin-bottom: 30px"
      >
         <box-card :avatar_jineng='value_1'  text="后端" avatar_Info=0 />
      </el-col>
      <el-col
        :xs="{ span: 24 }"
        :sm="{ span: 12 }"
        :md="{ span: 12 }"
        :lg="{ span: 6 }"
        :xl="{ span: 6 }"
        style="margin-bottom: 30px"
      >
        <box-card :avatar_jineng='value_2' text="前端" avatar_Info=1 />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import GithubCorner from "@/components/GithubCorner";
import PanelGroup from "./components/PanelGroup";
import LineChart from "./components/LineChart";
import RaddarChart from "./components/RaddarChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
import TransactionTable from "./components/TransactionTable";
import TodoList from "./components/TodoList";
import BoxCard from "./components/BoxCard";

import { selectOrdersByTime, getgrowth } from "@/api/user";
import store from "@/store";

export default {
  name: "DashboardAdmin",
  components: {
    GithubCorner,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    BoxCard,
  },
  data() {
    return {
      value_1: ['java','Spring','MySQL','ElasticSearch','80','60','40','60'],
       value_2: ['Vue','JavaScript','CSS','node','80','60','50','40'],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
        //开发人员信息
        authorInfo_1:'' ,
        authorInfo_2:'' ,
      value2: "",

      week_order: {
        monthOrderDetail: {
          allCount: "--",
          orderCountGrowthRate: "--",
          orderPriceGrowthRate: "--",
          allPrice: "--",
        },
        weekOrderDetail: {
          allPrice: "--",
          allCount: "--",
          orderPriceGrowthRate: "--",
          orderCountGrowthRate: "--",
        },
      },
    };
  },
  methods: {
    //获取开发成员信息
    getAuthorInfo() {
     console.log(this.$store)
      // this.$store.dispatch('user/getDevelopers').then((res) => {
      //      console.log('获取开发人员信息')
      //     console.log(res)
      //     })
    },

    getweekorder(thisWeekEnd, thisWeekStart) {
      //获取近期数据
      // this.lineChartData = lineChartData[type]
      console.log(thisWeekEnd, thisWeekStart);

      selectOrdersByTime({
        endTime: thisWeekEnd,
        startTime: thisWeekStart,
      }).then((res) => {
        this.order.order_price = [];
        this.order.order_num = [];
        for (let item of res.data.data) {
          this.order.order_price.push([item.day, item.orderAllPrice]);
          this.order.order_num.push([item.day, item.orderCount]);
        }
        console.log(this.order);
      });
    },
    que() {
      console.log("this.value2");
      // this.getweekorder(this.value2[1], this.value2[0]);
    },
    getLastWeek(value = null, separate = "-") {
      // 如果为null,则格式化当前时间
      if (!value) value = Number(new Date());
      // 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
      if (value.toString().length == 10) value *= 1000;
      value = +new Date(Number(value));

      const one_day = 86400000; // 24 * 60 * 60 * 1000;
      const lastWeekDate = new Date(value - 7 * one_day);
      const day = lastWeekDate.getDay() === 0 ? 7 : lastWeekDate.getDay(); // 返回1-7,7表示周日
      // 设置时间为上周那天的0点
      lastWeekDate.setHours(0, 0, 0, 0);

      //算出上周开始时间结束时间
      const week_start_time = new Date(
        lastWeekDate.getTime() - (day - 1) * one_day
      );
      const week_end_time = new Date(
        lastWeekDate.getTime() + (7 - day) * one_day
      );

      //格式化日期
      const filters = (n) => {
        return n < 10 ? (n = "0" + n) : n;
      };
      const startmonth = filters(week_start_time.getMonth() + 1);
      const startDay = filters(week_start_time.getDate());
      const endmonth = filters(week_end_time.getMonth() + 1);
      const endDay = filters(week_end_time.getDate());

      const startDateTime =
        week_start_time.getFullYear() +
        separate +
        startmonth +
        separate +
        startDay;
      const endDateTime =
        week_end_time.getFullYear() + separate + endmonth + separate + endDay;

      return {
        startDateTime: startDateTime + " 00:00:00",
        endDateTime: endDateTime + " 23:59:59",
      };
    },
    getCurrentWeek(value = null, separate = "-") {
      // 如果为null,则格式化当前时间
      if (!value) value = Number(new Date());
      // 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
      if (value.toString().length == 10) value *= 1000;
      value = +new Date(Number(value));

      const one_day = 86400000; // 24 * 60 * 60 * 1000;
      const weekDate = new Date(value);
      const day = weekDate.getDay() === 0 ? 7 : weekDate.getDay(); // 返回1-7,7表示周日
      // 设置时间为当天的0点
      weekDate.setHours(0, 0, 0, 0);

      //算出本周开始时间结束时间
      const week_start_time = new Date(
        weekDate.getTime() - (day - 1) * one_day
      );

      //格式化日期
      const filters = (n) => {
        return n < 10 ? (n = "0" + n) : n;
      };
      const startmonth = filters(week_start_time.getMonth() + 1);
      const startDay = filters(week_start_time.getDate());

      const startDateTime =
        week_start_time.getFullYear() +
        separate +
        startmonth +
        separate +
        startDay;
      // const endDateTime = start.getFullYear() + separate + endmonth + separate + endDay;
      //格式化当前时间
      var date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      let h = date.getHours() + ":";
      let m = date.getMinutes() + ":";
      let s = date.getSeconds();
      let endtime = Y + M + D + h + m + s;
      this.value2 = [];
      this.value2.push(startDateTime + " 00:00:00"), this.value2.push(endtime);
      console.log(this.value2);
      return {
        startDateTime: startDateTime + " 00:00:00",
        endDateTime: endtime,
      };
    },

    getGrowth(lastWeekEnd, lastWeekStart, thisWeekEnd, thisWeekStart) {
      getgrowth({
        lastWeekEnd: lastWeekEnd,
        lastWeekStart: lastWeekStart,
        thisWeekEnd: thisWeekEnd,
        thisWeekStart: thisWeekStart,
      }).then((res) => {
         this.week_order=res.data.data
      });
    },
  },
  created() {
    //获取开发人员信息
    this.getAuthorInfo();
    console.log("上周起始截至时间");
    let lastWeekDate = this.getLastWeek(null, "-");
    console.log(lastWeekDate);

    console.log("本周起始现在时间");
    let lastWeekDate1 = this.getCurrentWeek(null, "-");
    console.log(lastWeekDate1);

    this.getGrowth(
      lastWeekDate.endDateTime,
      lastWeekDate.startDateTime,
      lastWeekDate1.endDateTime,
      lastWeekDate1.startDateTime
    );

  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
   
  }
}
</style>
